<template>
	<el-dialog v-model="dialog" :title="form.id ? '修改商品类目' : '新增商品类目'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="form" label-width="140px" :rules="rules">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>类目信息</span>
					</div>
				</template>

				<el-form-item label="类目名称" prop="name">
					<el-input v-model="form.name" maxlength="20" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="上级类目" prop="parentId">
					<el-tree-select :disabled="form.parentId == '0' && form.id" style="width: 100%" v-model="form.parentId"
						:data="categoryTree" check-strictly :props="defaultProps" :render-after-expand="false"
						node-key="id"></el-tree-select>
				</el-form-item>
				<el-form-item label="类目描述" prop="description">
					<el-input v-model="form.description"></el-input>
				</el-form-item>
				<el-form-item label="类目图片" prop="categoryPics">
					<SelectMaterial v-model="form.categoryPics" :canChooseImagesNum="1"></SelectMaterial>
				</el-form-item>
				<el-form-item label="排序序号" prop="sort">
					<el-input-number style="width: 100%" v-model="form.sort" :min="0" :max="99999"
						controls-position="right" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio label="0">禁用</el-radio>
						<el-radio label="1">启用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref, reactive, toRefs } from 'vue';
import { addObj, getPage as getList, editObj, getById } from '/@/api/mall/goodscategory';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
interface DataState {
	form: {
		id: string | undefined,
		name: string,
		parentId: string,
		categoryPic: string,
		categoryPics: Array<any>,
		status: string,
		description: string,
		sort: number
	},
	rules: any,
	categoryTree: Array<any>
}
export default defineComponent({
	components: { SelectMaterial: defineAsyncComponent(() => import('/@/components/selectMaterial/index.vue')), },
	emits: ['initPage'],
	setup(prop, { emit }) {
		const data = reactive<DataState>({
			form: {
				id: undefined,
				name: '',
				parentId: '',
				categoryPic: '',
				categoryPics: [],
				status: '1',
				description: "",
				sort: 0
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入类目名称',
						trigger: 'change',
					},
				],
				parentId: [
					{
						required: true,
						message: '请输入上级类目',
						trigger: 'change',
					},
				],
				categoryPics: [
					{
						required: true,
						message: '请上传类目图片',
						trigger: 'change',
					},
				],
				status: [
					{
						required: true,
						message: '请选择状态',
						trigger: 'change',
					},
				],
				sort: [
					{
						required: true,
						message: '请输入排序序号',
						trigger: 'change',
					},
				],
			},
			categoryTree: [],
		});
		const dialog = ref(false);
		const loading = ref(false);
		const formRef = ref();
		const defaultProps = {
			children: 'children',
			label: 'name',
		};
		const initForm = (row: any) => {
			getCategoryTree();
			if (row && row.id) {
				getDetail(row.id);
			}
			dialog.value = true;
		};
		const getDetail = (id: string) => {
			loading.value = true;
			// 修改
			getById(id)
				.then((response: any) => {
					loading.value = false;
					data.form = response.data.data;
					data.form.categoryPics = [response.data.data.categoryPic]
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 关闭事件
		 */
		const handleClose = () => {
			resetForm(formRef.value);
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form.id = undefined;
			loading.value = false;
			dialog.value = false;
			formEl.resetFields();
		};
		/**
		 * 提交按钮
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					data.form.categoryPic = data.form.categoryPics ? data.form.categoryPics[0] : '';
					if (data.form.id) {
						//修改
						edit();
					} else {
						//新增
						add();
					}
				}
			});
		};
		/**
		 * 新增
		 */
		const add = () => {
			addObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('新增成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改
		 */
		const edit = () => {
			editObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('修改成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};
		// 获取类目
		const getCategoryTree = () => {
			getList()
				.then((response) => {
					const category = {
						id: '0',
						name: '顶级菜单',
						children: [],
					};
					const categoryList = response.data.data;
					categoryList.unshift(category);
					data.categoryTree = categoryList;
				})
				.catch(() => { });
		};
		return {
			dialog,
			loading,
			formRef,
			defaultProps,
			initForm,
			submitForm,
			handleClose,
			getCategoryTree,
			...toRefs(data)
		};
	},
});
</script>
